<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    margin: 100px auto;
    width: 350px;
    height: 300px;
    background-color: rgb(118, 11, 11);
  }

  h4 {
    text-align: center;
    font-size: 20px;
    color: white;
    font-weight: 800;
  }

  h3 {
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: pink;
  }

  h2 {
    text-align: center;
    font-size: 18px;
  }

  span {
    display: inline-block;
    width: 40px;
    height: 30px;
    background-color: #fff;
    margin-right: 5px;
  }

  h1 {
    margin-top: 40px;
    text-align: center;
    color: red;
  }
</style>

<body>
  <div class="box">\
    <h4>2025年11月11日</h4>
    <h3>距离下课还有</h3>
    <h2><span class="h">7</span><span class="m">30</span><span class="s">20</span></h2>
    <h1>下课时间17:30</h1>
  </div>
  <script>
    const h4 = document.querySelector('h4')
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    h4.innerHTML = `今天是${year}年${month}月${day}日`
    function getTime() {
      const data = +new Date('2025-11-11 17:30:00')
      // const data = new Date().getTime();
      let data1 = +new Date()
      let nowdata = (data - data1) / 1000
      let h = parseInt(nowdata / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(nowdata / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(nowdata % 60)
      s = s < 10 ? '0' + s : s
      document.querySelector('.h').innerHTML = `${h}`
      document.querySelector('.m').innerHTML = `${m}`
      document.querySelector('.s').innerHTML = `${s}`
    }
    getTime()
    setInterval(getTime, 1000)
  </script>
</body>

</html>